<template>
	<el-dialog
    v-model="dialogVisible"
    width="60%"
				style="background-color: rgba(8, 64, 132, 0.9);"
				:before-close="handleClose"
  >
			<div class="box" ref="echartDom"></div>
  </el-dialog>
</template>

<script setup lang="ts">
import { Bottom } from "@element-plus/icons-vue/dist/types";
import { inject, ref, shallowRef, onMounted, onUnmounted, watch,watchEffect,defineEmits } from "vue";

// 接收参数
const props = defineProps({
housingSupplyStatsData: {
type: Object,
default: () => {},
},
});
// 数据定义
const echartDom = ref<null | HTMLDivElement>(null);
const myChart = shallowRef<null | any>(null);
const echarts = inject<any>("echarts");
const dialogVisible = ref(false)
// 字体自适应方法
const pxToRem = (px: number) => {
const scale = document.documentElement.clientWidth / 1920;
return Math.round(px * Math.min(scale, 3));
};
// echarts初始化渲染
let legendData = props.housingSupplyStatsData.legendData;
let xAxisData = props.housingSupplyStatsData.xAxisData;
let yAxisData = props.housingSupplyStatsData.yAxisData;
let seriesData = props.housingSupplyStatsData.seriesData;
let colors = props.housingSupplyStatsData.colors;
let typeData = props.housingSupplyStatsData.typeData;
const emit = defineEmits(['dialogPieData'])

const getEchart = () => {
dialogVisible.value = ref(true)
if (echartDom.value) {
myChart.value = echarts.init(echartDom.value);
const option = {

tooltip: {
trigger: "item",
axisPointer: {
	type: "line",
	lineStyle: {
			color: "rgba(40,252,255,0.6)",
			shadowBlur: 10,
			shadowColor: "rgba(0, 0, 0, 0.9)",
	},
},
textStyle: {
	color: "#fff",
	fontSize: pxToRem(15),
},
backgroundColor: "rgba(8, 64, 132, 0.9)",
borderColor:'#fff',
},
legend: {
icon:"rect",
orient: 'horizontal',//horizontal水平显示
left:pxToRem(0),
bottom: pxToRem(0),
itemWidth: pxToRem(15),
itemHeight: pxToRem(8),
itemGap: pxToRem(3),
textStyle: {
	color: "#fff",
	fontSize: pxToRem(18),
	rich: {},
	padding: [0, 0, pxToRem(-3), 0],
},
},
series: [
{
type: 'pie',
radius:legendData[0] == '廉租房'?[pxToRem(150), pxToRem(200)]:[pxToRem(50), pxToRem(200)],
center: ['50%', '45%'],
roseType: legendData[0] == '廉租房'?'':'radius',
avoidLabelOverlap: legendData[0] == '廉租房'?false:true,
minAngle:legendData[0] == '廉租房'?pxToRem(10):0,
padAngle: legendData[0] == '廉租房'? pxToRem(5):0,
itemStyle: {
	borderRadius: legendData[0] == '廉租房'?pxToRem(15):pxToRem(2)
},
label: {
			show: true,
			textStyle: {
					fontSize: pxToRem(18), // 标签字体大小
					backgroundColor:'rgba(0,0,0,0)',
					color:'#fff'
			},
	},
labelLine: {
			show: true,//数据标签引导线
			length: legendData[0] == '廉租房'?20:1,
},
data: props.housingSupplyStatsData.seriesData
}
]
};
myChart.value.setOption(option);
myChart.value.on("click", (params) => {
	console.log('option',option)
	emit('dialogPieData',props.housingSupplyStatsData)
});
}
};
const updateChart = () => {
if (myChart.value) {
myChart.value.dispose(); // 销毁旧图表实例
}
legendData = props.housingSupplyStatsData.legendData;
xAxisData = props.housingSupplyStatsData.xAxisData;
yAxisData = props.housingSupplyStatsData.yAxisData;
seriesData = props.housingSupplyStatsData.seriesData;
colors = props.housingSupplyStatsData.colors;
typeData = props.housingSupplyStatsData.typeData;
getEchart();
};

watchEffect(() => {
updateChart();
});
const handleClose = () => {
	dialogVisible.value = false
	emit('closeBarPiemagnify',dialogVisible.value)
}

onMounted(() => {
	console.log(props.housingSupplyStatsData)
getEchart();
window.addEventListener("resize", () => {
if (myChart.value) {
	myChart.value.dispose(); // 销毁旧图表实例
}
getEchart(); // 创建新的图表实例
});
});

onUnmounted(() => {
window.removeEventListener("resize", () => {
if (myChart.value) {
	myChart.value.dispose(); // 在组件销毁时也需要销毁图表实例
}
});
});
</script>

<style scoped lang="less">
.box{
	width: 100%;
	height: 680px;
}
</style>
